<script>
export default {
  data() {
    return {
      dialogVisible: false,
      gmForm: {
        schoolCode:'',
        classCode:'',
        identityCardNumber:'',//身份证号
        studentBoardingArrangement:''
      },
      active: 'add',
      schoolList:[],
      classList:[],
      studentBoardingArrangementList:[]
    }
  },
  props: {
    tableColumns: Array,
    tableConfig: Object
  },
  mounted() {
    this.clearForm();
    this.getSchoolList();
  },
  methods: {
    openDia(sendMsg,active) {
      this.active = active;
      if (active === 'add') this.clearForm()
      else this.setBackData(sendMsg);
      this.dialogVisible = true;
    },
    clearForm(){
      this.tableColumns.forEach(x=>{
        this.gmForm = {
          schoolCode:'',
          classCode:''
        };
        this.$set(this.gmForm, x.id, '')
      })
    },
    setBackData(sendMsg){
      this.gmForm = {...sendMsg}
    },
    handleClose() {
      this.dialogVisible = false;
    },
    pullData() {
      //添加的时候去掉所有主键
      this.gmForm['stationCode'] = this.gmForm['stationName']
      // delete this.gmForm[this.tableConfig.mainKey]
      this.$HttpService.post(`${this.tableConfig.control}/add`,this.gmForm).then(()=>{
        this.$message.success('添加成功！')
        this.dialogVisible = false;
        this.$emit('onSuccess');
      })
    },
    getSchoolList(){
      this.$HttpService.get(`/t-school/findPageAuth?current=1&size=200`).then(res => {
       this.schoolList = res.records;
      })
    },
    getClassList(){
      this.classList = [];
      this.gmForm.classCode = '';
      this.$HttpService.get(`/t-class/findPageAuth`,{
        schoolCode: this.gmForm.schoolCode,
      }).then(res => {
        this.classList = res.records;
      })
    },
    getClassInfo(code){
      console.log(code);
      debugger
      this.classList.forEach(x=>{
        if (x.classCode == code){
          this.studentBoardingArrangementList = this.tableColumns[3]?.dictList;
          this.gmForm.studentBoardingArrangement = x.classBoardingArrangement;
        }
      })
    }
  }
}
</script>

<template>
  <el-dialog
      title="新增或修改"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
    <div class="center">
      <div class="row">
        <el-form ref="form" label-width="120px" :model="gmForm">
          <el-form-item :label="tableColumns[0].label" :prop="tableColumns[0].id">
            <el-select filterable  v-model="gmForm[tableColumns[0].id]" placeholder="请选择">
              <el-option v-for="item in tableColumns[0].dictList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="tableColumns[1].label" :prop="tableColumns[1].id">
            <el-input  :placeholder="`请输入学生姓名`" v-model="gmForm[tableColumns[1].id]"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="identityCardNumber">
            <el-input  :placeholder="`请输入学生身份证号`" v-model="gmForm['identityCardNumber']"></el-input>
          </el-form-item>
          <el-form-item label="所在学校" prop="schoolCode">
            <el-select  @change="getClassList" v-model="gmForm.schoolCode" placeholder="请选择学校">
              <el-option v-for="item in schoolList" :key="item.schoolCode" :label="item.schoolName" :value="item.schoolCode"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所在班级" prop="classCode">
            <el-select @change="getClassInfo" v-model="gmForm.classCode" placeholder="请选择班级">
              <el-option v-for="item in classList" :key="item.classCode" :label="item.className" :value="item.classCode"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="居住安排" prop="studentBoardingArrangement">
            <el-select v-model="gmForm.studentBoardingArrangement" placeholder="请选择居住安排">
              <el-option v-for="item in studentBoardingArrangementList" :key="item.id" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
<!--          <el-form-item :label="tableColumns[5].label" :prop="tableColumns[4].id">-->
<!--            <el-select v-model="gmForm[tableColumns[4].id]" placeholder="请选择">-->
<!--              <el-option v-for="item in tableColumns[4].dictList" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
        </el-form>
      </div>
      <div class="opa">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="pullData">确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<style scoped>
.center {
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 15%;
  min-height: 400px;
  .row{
    padding-left: 30px;
    width: 80%;
    text-align: center;
  }
  .opa{
    padding-left: 130px;
      text-align: right;
  }
}
::v-deep .map-com{
  width: 200px;
  height: 200px;
  background: #00a0e9;
}
::v-deep .el-input{
  width: 100%!important;
}
::v-deep .el-select{
  width: 100%!important;
}
::v-deep .el-cascader{
  width: 100%!important;
}
</style>
